<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <style>
    #load{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 加载动画的CSS */
    #loader-container {
      width: 300px;
      height: 300px;
      position: relative;
    }
  
    #loader-child1 {
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 50%;
      left: 0%;
      top: 0%;
      animation: rotate-one 0.75s linear infinite;
      border-bottom: 20px solid #0000ff;
    }
    #loader-child2 {
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 50%;
      right: 0%;
      top: 0%;
      animation: rotate-two 0.75s linear infinite;
      border-right: 20px solid #FF5E03;
    }
    #loader-child3 {
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border-radius: 50%;
      right: 0%;
      bottom: 0%;
      animation: rotate-three 0.75s linear infinite;
      border-top: 20px solid #ffff00;
    }
  
    @keyframes rotate-one {
      0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
      }
      100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
      }
    }
  
    @keyframes rotate-two {
      0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
      }
      100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
      }
    }
  
    @keyframes rotate-three {
      0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
      }
      100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
      }
    }
  </style>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
		<div id="load">
		  <div id="loader-container">
		    <div id="loader-child1"></div>
		    <div id="loader-child2"></div>
		    <div id="loader-child3"></div>
		  </div>
		</div>
	</div>
	<script type="module" src="../src/main.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>
